<template>
  <div class="preview">
    <div class="p-head" >
        <el-button type="danger" style="float:right;margin-top:7px;margin-right:250px;" @click="goBack">关闭预览&nbsp;<i class="el-icon-circle-close"></i></el-button>
        <div style="text-align:left; margin-left:300px;padding-top:15px;"><span style="color:red;">提示：</span>此为预览页面，不能参与作答！</div>
        
    
    </div>
    <div class="p-main">
        <div class="p-title" style="margin-top:20px;font-size:30px;font-weight:bold;color:#0095ff;padding-top:20px;">{{title}}</div>
      <el-card
        v-for="(item,index) in arr"
        shadow="never"
        :key="index"
        style="margin: 0;border:none;padding-left:50px;"
      >

        <template v-if="isApply=='A' &&item.type == 'S'">
          <norm-single
            :item="item"
            :auto-id="showId"
            :num="index"
          ></norm-single>
        </template>

        <!--        单选-->
        <template v-else-if="item.type == 'S'">
          <p-single-choice
            :item="item"
            :auto-id="showId"
            :num="index"
          ></p-single-choice>
        </template>

        <template v-else-if="isApply=='A'&&item.type == 'M'">
          <norm-mul :item="item" 
          :num="index" 
          :auto-id="showId"></norm-mul> 
        </template>
 
      

        

      </el-card>
      <div class="submit" style="margin-top:30px;">
        <el-button type="primary" @click="NotAllowed">提交</el-button>
    </div>
    </div>

    
  </div>
</template>

<script>
import PSingleChoice from '@/components/PreviewFinal/PSingleChoice'




//import Position from '@/components/Clock/Position' 
import { GetAllQuestionInfoWithoutUid } from "../../api";

import NormMul from '@/components/Enroll/NormMul'
import NormSingle from '@/components/Enroll/NormSingle'


export default {
    name: "editbody",
    components: {
    PSingleChoice,
   
  
    NormMul,
    NormSingle
    },
    data() {
    return {
        arr:[],
        questionnaire_id:2,
        index:0,
        title:'',
        showId: true,
        fromPath: '',
        type:"",
        isApply:"",
        intervalid:null
    }
},
    async mounted() {
        this.questionnaire_id=JSON.parse(this.$UrlEncode.decode(this.$route.query.questionnaireId))/1234
        this.index=JSON.parse(this.$UrlEncode.decode(this.$route.query.index))/1234
        const result=await GetAllQuestionInfoWithoutUid(this.questionnaire_id)
        if(result.error_code==4){
          alert("当前问卷为空")
        }
        console.log(result)
        this.isApply=result.type
        this.arr=result.question_list
        console.log(this.arr)
        this.title=result.questionnaire_title
        this.showId=result.is_order
        
    },
    methods: {
        goBack(){
          if (this.fromPath == '/') {
            this.$router.push('/manage');
          } else {
            this.$router.push({path: this.fromPath, query: {questionnaireId: this.$route.query.questionnaireId, index: this.$route.query.index}})
          }
        },
        NotAllowed(){
          alert("you are not allowed to submit");
        },
        datarefresh(){
          if (this.intervalId != null) {
            return;
          }
          // 计时器为空，操作
          this.intervalId = setInterval(() => {
            console.log("刷新" + new Date());
            this.initData(); //加载数据函数
          }, 2000)
        },
        clear(){
          clearInterval(this.intervalId); //清除计时器
          this.intervalId = null; 
        },
        async initData(){
          const result=await GetAllQuestionInfoWithoutUid(this.questionnaire_id)
          
          console.log(result)
          this.arr=result.question_list
          this.$forceUpdate()
        }
    },
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        vm.fromPath = from.path;
        console.log(to)
        console.log(from)
      });
    },
    created(){
      this.datarefresh();
    },
    destroyed(){
      this.clear();
    }
    
}
</script>

<style scoped>
.preview {
  height: 100%;
  width: 100%;
  background-color: #d1e9fa;
  overflow: auto;
}
.p-head {
  width: 100%;
  height: 7%;
  background-color: #fff;
  
}
.p-main {
  min-height: 91%;
  width: 60%;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 1%;
  
}
</style>